<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360slider</title>
</head>
<style>
    .main {

    }
</style>
<script>
    var clickX;
    var changeX; // 什么时候改变图片
    // 定义一个方法，表示点击了车，移动端用ontouchstart、PC端用onmousedown
    function clickCar() {
        // 获取当前点击位置
        var e = event || window.event;
        clickX = e.touches[0].pageX;
        changeX = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        console.log(clickX);

    }

    // 结束点击事件
    function endClick() {
        console.log('end');
    }

    var i = 0;
    // 移动事件 PC端
    function move() {
        var e = event || window.event;
        var carImg = document.getElementById('carImg');
        // PC端
        // var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        // var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        // var x = e.pageX || e.clientX + scrollX;
        // var y = e.pageY || e.clientY + scrollY;
        // console.log('move------X:'+x+",Y:"+y);
        // 移动端
        var x = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        var moveFlag;
        if (x < clickX) {
            if (changeX - x > 15) {
                i % 10 == i ? i = '0' + i : i;
                carImg.src = '/picture/'+ i + '.jpg';
                i--;
                i == -1 ? i = 15 : i;
                changeX = x;
            }
        } else {
            if (x - changeX > 15) {
                i % 10 == i ? i = '0' + i : i;
                carImg.src = '/picture/'+ i + '.jpg';
                i++;
                i == 16 ? i = 0 : i;
                changeX = x;
            }
        }
        // 重新把当前位置坐标赋值
        clickX = x;
    }

    var timer;
    // 自动播放
    function autoplay() {
        clearInterval(timer);
        timer = setInterval(function () {
            i % 10 == i ? i = '0' + i : i;
            carImg.src = '/picture/'+ i + '.jpg';
            i++;
            i == 16 ? i = 0 : i;
        }, 150);
    }
    function stopplay() {
        clearInterval(timer);
    }
</script>
<body>
    <div class="main" ontouchstart="clickCar()" ontouchend="endClick()" ontouchmove="move()">
        <img id="carImg" src="/picture/00.jpg" alt="">
    </div>
    <button onclick="autoplay()">自动播放</button>
    <button onclick="stopplay()">停止播放</button>
</body>
</html>